import React, { Component } from "react";
import { BrowserRouter as Router, Route,  Link, } from "react-router-dom";
import { Layout, Card, Skeleton, Row, Col, Statistic, Progress, Badge, List} from "antd";
import { Tabs, NoticeBar, NavBar, Icon } from 'antd-mobile';
import {
    getSchoolInformationBySchool, 
    getSchoolSecurityDataAndRank, 
} from "../js/api.js";
import '../css/wechatmobile.css';
import moment from 'moment';
import { CheckconditionDataForPatrolpush } from "../js/patrolpushapi.js";
import { InspectConditionDataForInpsectpush } from "../js/inspectpushapi.js";
const echarts = require('echarts');

class WeChatSecurityRank extends Component {

    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount() {
        // var useragent = navigator.userAgent;
        // if (useragent.match(/MicroMessenger/i) != 'MicroMessenger' || navigator.userAgent.toLowerCase().indexOf('dingtalk') == -1) {
        //     window.location.href = "wxError.html";//若不是微信浏览器，跳转到温馨error页面
        // }
    }


    render() {
        return (
            <Router basename="wechatsecurityrank">
                <Layout style={{ backgroundColor: '#f5f5f5' }}>
                    <Content>
                        <Route path="/" component={WeChatSecurityRankMain} />
                    </Content>
                </Layout>
            </Router>
        );
    }
}

class WeChatSecurityRankMain extends Component {
    constructor(props) {
        super(props);
        this.state = {
            departmentId: this.getUrlParam("departmentId"),
            // departmentId: 4,
            date: moment().format('YYYY-MM-DD')
        };
    }

    componentDidMount() {
        // InspectConditionDataForInpsectpush(parseInt(this.state.departmentId), this.state.date, 'ri')
        // .then((res) => {
        //     //得到上半个页面的数据
        //     let flag = 0
        //     let tabs = [
        //         { title: '七日排名', sub: '1' },
        //         { title: '今日巡更', sub: '2' },
        //         { title: '本周巡检', sub: '3' },
        //       ];
        //     if(res.data.data.length!=0){
        //         flag = 1
        //         tabs = [
        //             { title: '七日排名', sub: '1' },
        //             { title: '今日巡更', sub: '2' },
        //             { title: '本周巡检', sub: '3' },
        //             { title: '今日巡检', sub: '4' },
        //           ];
        //     }
        //     this.setState({
        //         tabs:tabs,
        //         flag:flag
        //     });
        // })
        // .catch((e) => {
        //     if (e.response) {
        //         //请求已发出，服务器返回状态码不是2xx。
        //         console.info(e.response.data)
        //         console.info(e.response.status)
        //         console.info(e.response.headers)
        //     } else if (e.request) {
        //         // 请求已发出，但没有收到响应
        //         // e.request 在浏览器里是一个XMLHttpRequest实例，
        //         // 在node中是一个http.ClientRequest实例
        //         console.info(e.request)
        //     } else {
        //         //发送请求时异常，捕捉到错误
        //         console.info('error', e.message)
        //     }
        //     console.info(e.config)
        // });
    }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

      render() {
          
        return (
        <div>
            {/* <Tabs tabs={this.state.tabs}
                initialPage={0}
                onChange={(tab, index) => { console.log('onChange', index, tab); }}
                onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
            > */}

            <NavBar
                    mode="light"
                >积分排名</NavBar>
            <WeChatSecurityData />

            {/* <div style={{alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                <WeChatSecurityData />
            </div>
            <div style={{alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                <SchoolPatrolpushMain />
            </div>
            <div style={{alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                <WeekSchoolInspectpushMain />
            </div>
            {this.state.flag == 1?
            <div style={{alignItems: 'center', justifyContent: 'center', height: 'document.documentElement.scrollHeight', backgroundColor: 'rgb(245,245,245)' }}>
                <TodaySchoolInspectpushMain />
            </div>:<div></div>
            }
            </Tabs> */}
        </div>    
        );
      }
}

class WeChatSecurityData extends Component {
    constructor(props) {
        super(props);
        this.state = {
            confirmLoading: false,
            departmentId: this.getUrlParam("departmentId"),
            // departmentId: 4,
            chartData:[],
            avgchartData:[],
            maxchartData:[],
            educationId:-1,
            schoolLevel:'学校',
            schoolname:'',
            eduName:'',
            allschoolnum1:0,
            allschoolnum2:0,
            comprehensivePointsRank1:0,
            comprehensivePointsRank2:0,
            dangerNumRank1:0,
            dangerNumRank2:0,
            patrolNumRank1:0,
            patrolNumRank2:0,
            patrolRatesRank1:0,
            patrolRatesRank2:0,
            inspectNumRank1:0,
            inspectNumRank2:0,
            inspectRatesRank1:0,
            inspectRatesRank2:0,
            lastweek: moment().subtract(7, 'days').format('YYYY-MM-DD'),
            yesterday: moment().subtract(1, 'days').format('YYYY-MM-DD'),
            chartsNum:3,
        }

    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {

        this.setState({
            confirmLoading: true,
            doneChartsNum: 0,
        });

        getSchoolInformationBySchool(parseInt(this.state.departmentId))
        .then((res) => {
            this.setState({
                educationId:res.data.educationId,
                schoolLevel:res.data.schoolLevel,
                schoolname:res.data.name,
                eduName:res.data.eduName,
                doneChartsNum: this.state.doneChartsNum + 1,
            });
            getSchoolSecurityDataAndRank(this.state.educationId, this.state.schoolLevel, this.state.lastweek, this.state.yesterday, this.state.schoolname)
            .then((res) => {
                let avgchartData = [];
                let maxchartData = [];
                let chartData = [];
                chartData[0] = res.data.comprehensivePoints,
                chartData[1] = res.data.patrolNum,
                chartData[2] = res.data.patrolRates,
                chartData[3] = res.data.dangerNum,
                chartData[4] = res.data.inspectRates,
                chartData[5] = res.data.inspectNum,
                avgchartData[0] = res.data.avgComprehensivePoints,
                avgchartData[1] = res.data.avgPatrolNum,
                avgchartData[2] = res.data.avgPatrolRates,
                avgchartData[3] = res.data.avgDangerNum,
                avgchartData[4] = res.data.avgInspectRates,
                avgchartData[5] = res.data.avgInspectNum,
                maxchartData[0] = res.data.maxComprehensivePoints,
                maxchartData[1] = res.data.maxPatrolNum,
                maxchartData[2] = res.data.maxPatrolRates,
                maxchartData[3] = res.data.maxDangerNum,
                maxchartData[4] = res.data.maxInspectRates,
                maxchartData[5] = res.data.maxInspectNum,
                this.setState({
                    allschoolnum1:res.data.schoolnum,
                    comprehensivePointsRank1:res.data.comprehensivePointsRank,
                    patrolNumRank1:res.data.patrolNumRank,
                    patrolRatesRank1:res.data.patrolRatesRank,
                    inspectNumRank1:res.data.inspectNumRank,
                    inspectRatesRank1:res.data.inspectRatesRank,
                    dangerNumRank1:res.data.dangerNumRank,
                    chartData:chartData,
                    avgchartData:avgchartData,
                    maxchartData:maxchartData,
                    doneChartsNum: this.state.doneChartsNum + 1,
                });
                console.log('doneChartsNum', this.state.doneChartsNum)
                if (this.state.doneChartsNum == this.state.chartsNum) {
                this.setState({
                    confirmLoading: false,
                });
            }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });


        getSchoolSecurityDataAndRank(-1, this.state.schoolLevel, this.state.lastweek, this.state.yesterday, this.state.schoolname)
        .then((res) => {
            this.setState({
                allschoolnum2:res.data.schoolnum,
                comprehensivePointsRank2:res.data.comprehensivePointsRank,
                patrolNumRank2:res.data.patrolNumRank,
                patrolRatesRank2:res.data.patrolRatesRank,
                inspectNumRank2:res.data.inspectNumRank,
                inspectRatesRank2:res.data.inspectRatesRank,
                dangerNumRank2:res.data.dangerNumRank,
                doneChartsNum: this.state.doneChartsNum + 1,
            });
            console.log('doneChartsNum', this.state.doneChartsNum)
            if (this.state.doneChartsNum == this.state.chartsNum) {
                this.setState({
                    confirmLoading: false,
                });
            }
        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });
        console.log('doneChartsNum', this.state.doneChartsNum)
            if (this.state.doneChartsNum == this.state.chartsNum) {
                this.setState({
                    confirmLoading: false,
                });
            }
        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });   
        
    }

    getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]);
        return null; //返回参数值
    }

    render() {
        return (
            <div>
                <Skeleton loading={this.state.confirmLoading} active>
                    <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }} mode="closable">
                        <span>
                        {(() => {
                            if(this.state.comprehensivePointsRank2/this.state.allschoolnum2<0.3){
                                return ('贵校近七天全市'+this.state.schoolLevel+'排名前30%，请继续保持！')
                            }else if(this.state.comprehensivePointsRank2/this.state.allschoolnum2>=0.3 && this.state.comprehensivePointsRank2/this.state.allschoolnum2<0.7){
                                return ('贵校近七天全市'+this.state.schoolLevel+'排名居中，还要努力哦！')
                            }else{
                                return ('贵校近七天全市'+this.state.schoolLevel+'排名后30%，要加把劲了！')
                            }
                        }
                        )()}
                        </span>
                        <img style={{ height: '18px', width:'18px', verticalAlign: 'middle' }} src={require("../img/加油.png")} />
                    </NoticeBar>                
                    <div
                        className='conditionCard'
                        style={{ backgroundColor: '#ffffff', padding:8, textAlign:'center', boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)'}}>
                        <span style={{fontSize:21, fontWeight:'bloder', color:'#000'}}>贵校近七天全市综合排名</span>
                        {this.state.comprehensivePointsRank2<0.5*this.state.allschoolnum2?<span style={{fontSize:21, fontWeight:'bloder', color:'green'}}>第{this.state.comprehensivePointsRank2}名</span>:<span style={{fontSize:21, fontWeight:'bloder', color:'red'}}>第{this.state.comprehensivePointsRank2}名</span>}
                        <h4 align="center" style={{marginTop:10}}>统计时段：{this.state.lastweek}~{this.state.yesterday}</h4>
                    </div>
                                    
                    <div
                        className='conditionCard'
                        style={{
                        marginTop: 12,
                        padding: 8,
                        height: 350,
                        backgroundColor: '#ffffff',
                        boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)'
                    }}>
                         <ChartSecurityData
                            that={this}
                            chartData={this.state.chartData}
                            avgchartData={this.state.avgchartData}
                            maxchartData={this.state.maxchartData} />
                    </div>
                    <div
                        className='conditionCard'
                        style={{ backgroundColor: '#ffffff', textAlign:'center', padding:8, boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)'}}>
                            <h2 align="center">全市{this.state.schoolLevel}排名（共{this.state.allschoolnum2}所）</h2>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <Statistic title="综合积分" value={'第'+this.state.comprehensivePointsRank2+'名'}
                                    valueStyle={this.state.comprehensivePointsRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                                <Col span={12}>
                                    <Statistic title="隐患处理个数" value={'第'+this.state.dangerNumRank2+'名'} 
                                    valueStyle={this.state.dangerNumRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <Statistic title="巡更次数" value={'第'+this.state.patrolNumRank2+'名'} 
                                    valueStyle={this.state.patrolNumRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                                <Col span={12}>
                                    <Statistic title="巡更完成率" value={'第'+this.state.patrolRatesRank2+'名'} 
                                    valueStyle={this.state.patrolRatesRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <Statistic title="巡检次数" value={'第'+this.state.inspectNumRank2+'名'} 
                                    valueStyle={this.state.inspectNumRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                                <Col span={12}>
                                    <Statistic title="巡检完成率" value={'第'+this.state.inspectRatesRank2+'名'} 
                                    valueStyle={this.state.inspectRatesRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                            </Row>
                            <div>
                                <span style={{color:'green'}}>绿色</span><span>表示排名前50%，</span><span style={{color:'red'}}>红色</span><span>表示排名后50%</span>
                            </div>
                    </div>
                    <div
                        className='conditionCard'
                        style={{ backgroundColor: '#ffffff', textAlign:'center', padding:8, boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)'}}>
                            <h2 align="center">{this.state.eduName}{this.state.schoolLevel}排名（共{this.state.allschoolnum1}所）</h2>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <Statistic title="综合积分" value={'第'+this.state.comprehensivePointsRank1+'名'}
                                    valueStyle={this.state.comprehensivePointsRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}} />
                                </Col>
                                <Col span={12}>
                                    <Statistic title="隐患处理个数" value={'第'+this.state.dangerNumRank1+'名'} 
                                    valueStyle={this.state.dangerNumRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <Statistic title="巡更次数" value={'第'+this.state.patrolNumRank1+'名'} 
                                    valueStyle={this.state.patrolNumRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                                <Col span={12}>
                                    <Statistic title="巡更完成率" value={'第'+this.state.patrolRatesRank1+'名'} 
                                    valueStyle={this.state.patrolRatesRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                            </Row>
                            <Row gutter={16}>
                                <Col span={12}>
                                    <Statistic title="巡检次数" value={'第'+this.state.inspectNumRank1+'名'} 
                                    valueStyle={this.state.inspectNumRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                                <Col span={12}>
                                    <Statistic title="巡检完成率" value={'第'+this.state.inspectRatesRank1+'名'} 
                                    valueStyle={this.state.inspectRatesRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                </Col>
                            </Row>
                            <div>
                                <span style={{color:'green'}}>绿色</span><span>表示排名前50%，</span><span style={{color:'red'}}>红色</span><span>表示排名后50%</span>
                            </div>
                    </div>
                    <div style={{textAlign:'center', marginTop:15}}>
                        <span>具体学校积分排名情况请登录管理后台查看</span>
                    </div>
                </Skeleton>
            </div>
        )

    }
}

class ChartSecurityData extends Component {
    constructor(props) {
        super(props);
        this.state = {
            chartData: props.chartData,
            avgchartData:props.avgchartData,
            maxchartData:props.maxchartData,
            that: props.that,
        };
    }

    componentWillReceiveProps(props) {
        this.setState({
            chartData: props.chartData,
            avgchartData:props.avgchartData,
            maxchartData:props.maxchartData,
            that: props.that,
        }, () => {
            this.drawChart();
        })
    }

    componentDidMount() {
        this.drawChart();
    }


    drawChart() {

            let that = this
                    
            let chart = echarts.init(document.getElementById('chartSecurityRank'));
            let option =   {
            backgroundColor:"rgb(255,255,255,1)",
            title: [{
                text: '校园安全工作指数',
                left:'center',
                textStyle: {  color: 'rgba(0, 0, 0, 1)', fontSize: 21, fontWeight: 'normal' }, 
                }],
            tooltip: {
                position: 'inside',
                show: true,
                formatter: function() {
                    var html = '本校 : '+ '<br>'
                             + '综合积分 : ' + that.state.chartData[0] + '分<br>'
                             + '巡更次数 : ' + that.state.chartData[1] + '次<br>'
                             + '巡更完成率 : ' + that.state.chartData[2] + '%<br>'
                             + '隐患处理个数 : ' + that.state.chartData[3] + '个<br>'
                             + '巡检完成率 : ' + that.state.chartData[4] + '%<br>'
                             + '巡检次数 : ' + that.state.chartData[5] + '次<br>'
                             + '平均 : '+ '<br>'
                             + '综合积分 : ' + that.state.avgchartData[0] + '分<br>'
                             + '巡更次数 : ' + that.state.avgchartData[1] + '次<br>'
                             + '巡更完成率 : ' + that.state.avgchartData[2] + '%<br>'
                             + '隐患处理个数 : ' + that.state.avgchartData[3] + '个<br>'
                             + '巡检完成率 : ' + that.state.avgchartData[4] + '%<br>'
                             + '巡检次数 : ' + that.state.avgchartData[5] + '次<br>'
                    return html
                }
            },
            legend: {
                orient:'horizontal',
                icon: 'circle', //图例形状
                data: ['本校', '平均'],
                bottom:'top',
                right:'center',
                itemWidth: 14, // 图例标记的图形宽度。[ default: 25 ]
                itemHeight: 14, // 图例标记的图形高度。[ default: 14 ]
                itemGap: 21, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
                textStyle: {
                    fontSize: 14,
                },
            },
            radar: {
                radius: "58%", //大小
                nameGap: 10, // 图中工艺等字距离图的距离
                center: ["50%", "50%"], // 图的位置
                name: {
                    textStyle: {
                    color: "#333",
                    fontSize: 13
                    },
                },
                indicator: [
                    {"name":'综合积分', "max":this.state.maxchartData[0]},
                    {"name":'巡更次数', "max":this.state.maxchartData[1]},
                    {"name":'巡更完成率', "max":this.state.maxchartData[2]},
                    {"name":'隐患处理个数', "max":this.state.maxchartData[3]},
                    {"name":'巡检完成率', "max":this.state.maxchartData[4]},
                    {"name":'巡检次数', "max":this.state.maxchartData[5]},
                ],
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: '#fff',
                        shadowColor: 'rgba(14,122,191,0.19)',
                        shadowBlur: 30,
                        shadowOffsetY: 20
                    }
                },
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false
                },
            
            },
        
            series: [
                {
                    type: "radar",
                    data: [
                        {   value:[this.state.maxchartData[0], this.state.maxchartData[1], this.state.maxchartData[2], this.state.maxchartData[3], this.state.maxchartData[4], this.state.maxchartData[5]],
                            symbol: 'none',
                            lineStyle: {
                                width: 0
                            },
                            itemStyle: {
                                color: '#fff'
                            },
                            areaStyle: {
                                color: '#fff',
                                shadowColor: 'rgba(14,122,191,0.15)',
                                shadowBlur: 30,
                                shadowOffsetY: 20
                            }
                        },
                        {   value:[this.state.maxchartData[0]*0.8, this.state.maxchartData[1]*0.8, this.state.maxchartData[2]*0.8, this.state.maxchartData[3]*0.8, this.state.maxchartData[4]*0.8, this.state.maxchartData[5]*0.8],
                            symbol: 'none',
                            lineStyle: {
                                width: 0
                            },
                            itemStyle: {
                                color: '#fff'
                            },
                            areaStyle: {
                                color: '#fff',
                                shadowColor: 'rgba(14,122,191,0.15)',
                                shadowBlur: 30,
                                shadowOffsetY: 20
                            }
                        },
                        {   value:[this.state.maxchartData[0]*0.6, this.state.maxchartData[1]*0.6, this.state.maxchartData[2]*0.6, this.state.maxchartData[3]*0.6, this.state.maxchartData[4]*0.6, this.state.maxchartData[5]*0.6],
                            symbol: 'none',
                            lineStyle: {
                                width: 0
                            },
                            itemStyle: {
                                color: '#fff'
                            },
                            areaStyle: {
                                color: '#fff',
                                shadowColor: 'rgba(14,122,191,0.15)',
                                shadowBlur: 30,
                                shadowOffsetY: 20
                            }
                        },
                        {   value:[this.state.maxchartData[0]*0.4, this.state.maxchartData[1]*0.4, this.state.maxchartData[2]*0.4, this.state.maxchartData[3]*0.4, this.state.maxchartData[4]*0.4, this.state.maxchartData[5]*0.4],
                            symbol: 'none',
                            lineStyle: {
                                width: 0
                            },
                            itemStyle: {
                                color: '#fff'
                            },
                            areaStyle: {
                                color: '#fff',
                                shadowColor: 'rgba(14,122,191,0.15)',
                                shadowBlur: 30,
                                shadowOffsetY: 20
                            }
                        },
                        {   value:[this.state.maxchartData[0]*0.2, this.state.maxchartData[1]*0.2, this.state.maxchartData[2]*0.2, this.state.maxchartData[3]*0.2, this.state.maxchartData[4]*0.2, this.state.maxchartData[5]*0.2],
                            symbol: 'none',
                            lineStyle: {
                                width: 0
                            },
                            itemStyle: {
                                color: '#fff'
                            },
                            areaStyle: {
                                color: '#fff',
                                shadowColor: 'rgba(14,122,191,0.15)',
                                shadowBlur: 30,
                                shadowOffsetY: 20
                            }
                        },
                        {
                            name:'平均',
                            symbol: "circle",
                            symbolSize: 8,
                            value:this.state.avgchartData,
                            areaStyle: {
                                color: "rgb(245,88,87)",
                                opacity: 0.3
                            },
                            lineStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(245,88,87)'
                                }, {
                                    offset: 1,
                                    color: '#8B0000'
                                }], false),
                                width: 2
                            },
                            itemStyle: {
                                color: "#f47983",
                                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(245,88,87)'
                                }, {
                                    offset: 1,
                                    color: '#8B0000'
                                }], false),
                                borderWidth: 2,
                                opacity: 1
                            },
                        },
                        {
                            name:'本校',
                            symbol: "circle",
                            symbolSize: 8,
                            value:this.state.chartData,
                            areaStyle: {
                                color: "#39B2FF",
                                opacity: 0.3
                            },
                            lineStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00A2FF'
                                }, {
                                    offset: 1,
                                    color: '#0060FF'
                                }], false),
                                width: 2
                            },
                            itemStyle: {
                                color: "#00DEFF",
                                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00DEFF'
                                }, {
                                    offset: 1,
                                    color: '#1598FF'
                                }], false),
                                borderWidth: 2,
                                opacity: 1
                            },
                        },
                      ],
                    }
                  ]
                }

        chart.setOption(option)
        window.onresize = chart.resize;          
        }

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (
        
        <div id='chartSecurityRank' style={chartStyle} />
        )
    }
}

const { Content, Sider } = Layout;

// class SchoolPatrolpushMain extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             data: [],
//             schoolId: 0,
//             should: 0,
//             done: 0,

//             confirmLoading: false,
//         };
//     }

//     componentDidMount() {
//         this.refreshData();
//     }

//     refreshData() {
//         this.setState({
//             confirmLoading: true,
//         });

//         let schoolId = this.getUrlParam("departmentId");
//         // let schoolId = 348;
//         let date = moment().format('YYYY-MM-DD');

//         this.setState({
//             schoolId: schoolId,
//             date: date,
//         });

//         CheckconditionDataForPatrolpush(schoolId, date)
//             .then((res2) => {
//                 //得到整个页面的数据
//                 let dataTemp = []
//                 res2.data.data.forEach((item, index) => {
//                     let temp = {
//                         timePeriod: item.createTime,
//                         people: item.realName,
//                         routeDoneNum: item.routeDoneNum,
//                         symbol: item.symbol,
//                         routeRightNum: item.routeRightNum,
//                         routeName:item.routeName,
//                         routeNameId:item.routeNameId,
//                         routeNum:item.routeNum
//                     };
//                     dataTemp.push(temp);
//                 });
//                 //console.log(dataTemp);
//                 let percent = ((res2.data.done > res2.data.should ? (res2.data.should) : (res2.data.done)) / res2.data.should * 100).toFixed(2);
//                 if (percent == 100) {
//                     percent = Number(percent).toFixed(0);
//                 }

//                 this.setState({
//                     data: dataTemp.reverse(),
//                     routeNum: res2.data.routeNum,
//                     should: res2.data.should,
//                     done: res2.data.done,
//                     percent: percent,
//                     schoolId: res2.data.schoolId,

//                     confirmLoading: false,
//                 });
//             })
//             .catch((e) => {
//                 if (e.response) {
//                     //请求已发出，服务器返回状态码不是2xx。
//                     console.info(e.response.data)
//                     console.info(e.response.status)
//                     console.info(e.response.headers)
//                 } else if (e.request) {
//                     // 请求已发出，但没有收到响应
//                     // e.request 在浏览器里是一个XMLHttpRequest实例，
//                     // 在node中是一个http.ClientRequest实例
//                     console.info(e.request)
//                 } else {
//                     //发送请求时异常，捕捉到错误
//                     console.info('error', e.message)
//                 }
//                 console.info(e.config)
//             });

//     }

//     getUrlParam(name) {
//         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
//         var r = window.location.search.substr(1).match(reg);  //匹配目标参数
//         if (r != null) return unescape(r[2]);
//         return null; //返回参数值
//     }

//     render() {
//         //console.log(percent);
//         let cards = this.state.data.map((d, index) => {
//             console.log(d.routeRightNum);
//             let normative = (d.routeRightNum / d.routeNum * 100).toFixed(2); //打卡规范性(准确率)
//             if (normative == 100) {
//                 normative = Number(normative).toFixed(0);
//             }
//             // ((d.routeDoneNum > 23 ? 23 : d.routeDoneNum) / this.state.routeNum * 100).toFixed(2);
//             let completionRate = (( d.routeDoneNum / d.routeNum ) * 100).toFixed(2);
//             if (completionRate == 100) {
//                 completionRate = Number(completionRate).toFixed(0);
//             }

//             let data = [{
//                 title: '巡更路线',
//                 description: (<div style={{ color: '#000000' }}>{d.routeName}</div>)
//             }, {
//                 title: '巡更人员',
//                 description: (<div style={{ color: '#000000' }}>{d.people}</div>)
//             }, {
//                 title: '巡更点位',
//                 description: (<div style={{ color: '#000000' }}>{d.routeNum + '个'}</div>)
//             }, {
//                 title: '实际巡更',
//                 description: (<div style={{ color: '#000000' }}>{d.routeDoneNum + '个'}</div>)
//             },
//             {
//                 title: '完成率',
//                 description: (<div style={{ color: '#000000' }}>{completionRate + '%'}</div>)
//             }];

//             return (
//                 <Link
//                     style={{ textDecoration: 'none' }}
//                     to={{
//                         pathname: '/detail',
//                         state: {
//                             symbol: d.symbol,
//                             schoolId: this.state.schoolId,
//                             routeNameId:d.routeNameId,
//                             completionRate:completionRate
//                         }
//                     }}>
//                     <Card
//                         key={index}
//                         title={d.timePeriod}
//                         // extra={'详情 >'}
//                         className='conditionCard'
//                         style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
//                         bodyStyle={{
//                             padding: '10px 24px',
//                         }}>
//                         <Layout>
//                             <Content style={{ background: '#fff' }}>
//                                 <List
//                                     itemLayout="horizontal"
//                                     style={{ marginRight: 25 }}
//                                     size="small"
//                                     bordered={false}
//                                     split={false}
//                                     dataSource={data}
//                                     renderItem={item => (
//                                         <List.Item>
//                                             <Row
//                                                 type="flex"
//                                                 justify="space-between"
//                                                 style={{
//                                                     width: "100%"
//                                                 }}>
//                                                 <Col span={8} xs={10}>
//                                                     {item.title}
//                                                 </Col>
//                                                 <Col
//                                                     // style={{ textAlign: "end" }}
//                                                     span={16} xs={14}>
//                                                     {item.description}
//                                                 </Col>
//                                             </Row>
//                                         </List.Item>
//                                     )}
//                                 />
//                             </Content>
//                             <Sider width={'25%'} style={{ background: '#fff' }}>
//                                 <Progress
//                                     className='progress-center'
//                                     style={{
//                                         fontSize: '12px'
//                                     }}
//                                     size='small'
//                                     type="circle"
//                                     percent={normative}
//                                     width={85}
//                                     strokeWidth={8}
//                                     format={percent => `准确率${percent}%`}
//                                 />
//                             </Sider>
//                         </Layout>
//                     </Card>
//                 </Link>
//             )
//         });


//         return (
//             <div style={{ paddingBottom: '10px' }}>
//                 <Skeleton loading={this.state.confirmLoading} active>
//                     <div
//                         className='conditionCard'
//                         style={{
//                             boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)',
//                             textAlign: 'center',
//                             padding: '12px 24px',
//                             background: '#ffffff',
//                         }}>
//                         <div>
//                             日期：
//                             {this.state.date}
//                         </div>
//                         <div>
//                             <Progress
//                                 type="circle"
//                                 percent={this.state.percent}
//                                 width={150}
//                                 strokeWidth={8}
//                                 style={{ marginTop: '10px', fontSize: '28px' }}
//                                 format={percent => `完成率${percent}%`}
//                             />
//                         </div>
//                         <div>
//                             <Row style={{ marginTop: '10px', }}>
//                                 <Col span={12}>
//                                     <Badge
//                                         status="success"
//                                         text={"已巡计划：" + this.state.done + "个"} />
//                                 </Col>
//                                 <Col span={12}>
//                                     <Badge
//                                         status="error"
//                                         text={"未巡计划：" + (this.state.should - this.state.done) + "个"} />
//                                 </Col>
//                             </Row>
//                         </div>
//                     </div>
//                     <div style={{
//                         width: '100%',
//                         marginTop: '10px',
//                     }}>
//                         {cards}
//                     </div>
//                 </Skeleton>
//             </div>
//         )
//     }

// }

// class TodaySchoolInspectpushMain extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             classData: [],
//             schoolId: undefined,
//             date: undefined,
//             confirmLoading: false,
//         };
//     }

//     componentDidMount() {
//         this.refreshData();
//     }

//     refreshData() { //date与schoolId
//         this.setState({
//             confirmLoading: true,
//         });

//         let schoolId = this.getUrlParam("departmentId");
//         // let schoolId = 383;
//         let date = moment().format('YYYY-MM-DD');

//         this.setState({
//             schoolId: schoolId,
//             date: date
//         });

//         InspectConditionDataForInpsectpush(schoolId, date, 'ri')
//             .then((res) => {
//                 //得到上半个页面的数据
//                 let classData = [];
//                 res.data.data.forEach((item, index) => {
//                     classData.push({
//                         key: index + 1,
//                         teamId: parseInt(item.classId),
//                         teamName: '今日巡检 ' + item.className,
//                         teamMates: item.classMates,
//                         should: parseInt(item.should), //应巡计划数量
//                         real: parseInt(item.real), //完成计划数量
//                         abnormal: parseInt(item.abnormal), //发现异常项目数
//                     });
//                 });
//                 this.setState({
//                     classData: classData,
//                     should: res.data.shouldAllClass, //应巡计划数量
//                     real: res.data.realAllClass, //实巡计划数量
//                     abnormal: res.data.abnormalAllClass, //异常项目数量
//                     done: res.data.doneAllClass, //完成项目数
//                     all: res.data.allAllClass, //总项目数
//                     confirmLoading: false,
//                 });
//             })
//             .catch((e) => {
//                 if (e.response) {
//                     //请求已发出，服务器返回状态码不是2xx。
//                     console.info(e.response.data)
//                     console.info(e.response.status)
//                     console.info(e.response.headers)
//                 } else if (e.request) {
//                     // 请求已发出，但没有收到响应
//                     // e.request 在浏览器里是一个XMLHttpRequest实例，
//                     // 在node中是一个http.ClientRequest实例
//                     console.info(e.request)
//                 } else {
//                     //发送请求时异常，捕捉到错误
//                     console.info('error', e.message)
//                 }
//                 console.info(e.config)
//             });
//     }

//     getUrlParam(name) {
//         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
//         var r = window.location.search.substr(1).match(reg);  //匹配目标参数
//         if (r != null) return unescape(r[2]);
//         return null; //返回参数值
//     }

//     render() {
//         let cards = this.state.classData.map((d, index) => {
//             let completionRate = (d.real / d.should * 100).toFixed(2);
//             if (completionRate == 100) {
//                 completionRate = Number(completionRate).toFixed(0);
//             }
//             let data = [{
//                 title: '班组成员',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.teamMates}</div>
//                 )
//             }, {
//                 title: '应巡计划',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.should}</div>
//                 )
//             }, {
//                 title: '实际完成',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.real}</div>
//                 )
//             }, {
//                 title: '发现异常',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.abnormal}</div>
//                 )
//             }];

//             return (
//                 <Link
//                     style={{ textDecoration: 'none' }}
//                     to={{
//                         pathname: '/classinspect',
//                         state: {
//                             schoolId: this.state.schoolId,
//                             teamId: d.teamId,
//                             teamName: d.teamName,
//                             teamMates: d.teamMates,
//                             should: d.should,
//                             real: d.real,
//                             abnormal: d.abnormal,
//                         }
//                     }}>
//                     <Card
//                         key={index}
//                         title={d.teamName}
//                         // extra={'详情 >'}
//                         className='conditionCard'
//                         style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
//                         bodyStyle={{
//                             padding: '10px 24px',
//                         }}>
//                         <Layout>
//                             <Content style={{ background: '#fff' }}>
//                                 <List
//                                     itemLayout="horizontal"
//                                     style={{ marginRight: 25 }}
//                                     size="small"
//                                     bordered={false}
//                                     split={false}
//                                     dataSource={data}
//                                     renderItem={item => (
//                                         <List.Item>
//                                             <Row
//                                                 type="flex"
//                                                 justify="space-between"
//                                                 style={{
//                                                     width: "100%"
//                                                 }}>
//                                                 <Col span={8} xs={10}>
//                                                     {item.title}
//                                                 </Col>
//                                                 <Col
//                                                     style={{ textAlign: "end" }}
//                                                     span={16} xs={14}>
//                                                     {item.description}
//                                                 </Col>
//                                             </Row>
//                                         </List.Item>
//                                     )}
//                                 />
//                             </Content>
//                             <Sider width={'25%'} style={{ background: '#fff' }}>
//                                 <Progress
//                                     className='progress-center'
//                                     style={{
//                                         fontSize: '12px',
//                                     }}
//                                     size='small'
//                                     type="circle"
//                                     percent={completionRate}
//                                     width={85}
//                                     strokeWidth={8}
//                                     format={percent => `完成率${percent}%`}
//                                 />
//                             </Sider>
//                         </Layout>
//                     </Card>
//                 </Link>
//             )
//         });
//         let percent
//         if(this.state.should != 0){
//             percent = (this.state.real / this.state.should * 100).toFixed(2);
//         }else{
//             percent = '00.00'
//         }
//         console.log("percent", percent)
//         if (percent == 100) {
//             percent = Number(percent).toFixed(0);
//         }

//         return (
//             <div style={{ paddingBottom: '10px' }}>
//                 <Skeleton loading={this.state.confirmLoading} active>
//                     <div
//                         className='conditionCard'
//                         style={{
//                             boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)', 
//                             textAlign: 'center',
//                             padding: '12px 24px',
//                             background: '#ffffff',
//                         }}>
//                         <div>
//                             日期：
//                                 {moment().format('YYYY-MM-DD')}
//                         </div>
//                         <div>
//                             <Progress
//                                 type="circle"
//                                 percent={percent}
//                                 width={150}
//                                 strokeWidth={8}
//                                 style={{ marginTop: '10px', fontSize: '28px' }}
//                                 format={percent => `完成率${percent}%`}
//                             />
//                         </div>

//                         <div>
//                             <Row style={{ marginTop: '10px', }}>
//                                 <Col span={12}>
//                                     <Badge
//                                         status="processing"
//                                         text={"应巡计划：" + this.state.should + "个"} />
//                                 </Col>
//                                 <Col span={12}>
//                                     <Badge
//                                         status="success"
//                                         text={"实际完成：" + this.state.real + "个"} />
//                                 </Col>
//                                 <Col span={24}>
//                                     <Badge
//                                         status="warning"
//                                         text={"巡检项目数/已完成数/发现隐患数：" +
//                                             this.state.all + "/" + this.state.done + "/" + this.state.abnormal} />
//                                 </Col>
//                             </Row>
//                         </div>
//                     </div>
//                     <div style={{
//                         width: '100%',
//                         marginTop: '10px',
//                     }}>
//                         {cards}
//                     </div>
//                 </Skeleton>
//             </div>
//         )
//     }
// }

// class WeekSchoolInspectpushMain extends Component {
//     constructor(props) {
//         super(props);
//         this.state = {
//             classData: [],
//             schoolId: undefined,
//             date: undefined,
//             confirmLoading: false,
//         };
//     }

//     componentDidMount() {
//         this.refreshData();
//     }

//     refreshData() { //date与schoolId
//         this.setState({
//             confirmLoading: true,
//         });

//         let schoolId = this.getUrlParam("departmentId");
//         // let schoolId =4 ;
//         let date = moment().week(moment().week()).startOf('week').add(5, "days").format('YYYY-MM-DD');

//         this.setState({
//             schoolId: schoolId,
//             date: date,
//         });

//         InspectConditionDataForInpsectpush(schoolId, date, 'zhou')
//             .then((res) => {
//                 //得到上半个页面的数据
//                 let classData = [];
//                 res.data.data.forEach((item, index) => {
//                     classData.push({
//                         key: index + 1,
//                         teamId: parseInt(item.classId),
//                         teamName: '本周巡检 ' + item.className,
//                         teamMates: item.classMates,
//                         should: parseInt(item.should), //应巡计划数量
//                         real: parseInt(item.real), //完成计划数量
//                         abnormal: parseInt(item.abnormal), //发现异常项目数
//                     });
//                 });
//                 this.setState({
//                     classData: classData,
//                     should: res.data.shouldAllClass, //应巡计划数量
//                     real: res.data.realAllClass, //实巡计划数量
//                     abnormal: res.data.abnormalAllClass, //异常项目数量
//                     done: res.data.doneAllClass, //完成项目数
//                     all: res.data.allAllClass, //总项目数
//                     confirmLoading: false,
//                 });
//             })
//             .catch((e) => {
//                 if (e.response) {
//                     //请求已发出，服务器返回状态码不是2xx。
//                     console.info(e.response.data)
//                     console.info(e.response.status)
//                     console.info(e.response.headers)
//                 } else if (e.request) {
//                     // 请求已发出，但没有收到响应
//                     // e.request 在浏览器里是一个XMLHttpRequest实例，
//                     // 在node中是一个http.ClientRequest实例
//                     console.info(e.request)
//                 } else {
//                     //发送请求时异常，捕捉到错误
//                     console.info('error', e.message)
//                 }
//                 console.info(e.config)
//             });
//     }

//     getUrlParam(name) {
//         var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
//         var r = window.location.search.substr(1).match(reg);  //匹配目标参数
//         if (r != null) return unescape(r[2]);
//         return null; //返回参数值
//     }

//     render() {
//         let cards = this.state.classData.map((d, index) => {
//             let completionRate = (d.real / d.should * 100).toFixed(2);
//             if (completionRate == 100) {
//                 completionRate = Number(completionRate).toFixed(0);
//             }
//             let data = [{
//                 title: '班组成员',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.teamMates}</div>
//                 )
//             }, {
//                 title: '应巡计划',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.should}</div>
//                 )
//             }, {
//                 title: '实际完成',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.real}</div>
//                 )
//             }, {
//                 title: '发现异常',
//                 description: (
//                     <div className='wechatPushCardDescription'>{d.abnormal}</div>
//                 )
//             }];

//             return (
//                 <Link
//                     style={{ textDecoration: 'none' }}
//                     to={{
//                         pathname: '/classinspect',
//                         state: {
//                             schoolId: this.state.schoolId,
//                             teamId: d.teamId,
//                             teamName: d.teamName,
//                             teamMates: d.teamMates,
//                             should: d.should,
//                             real: d.real,
//                             abnormal: d.abnormal,
//                         }
//                     }}>
//                     <Card
//                         key={index}
//                         title={d.teamName}
//                         // extra={'详情 >'}
//                         className='conditionCard'
//                         style={{ boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)' }}
//                         bodyStyle={{
//                             padding: '10px 24px',
//                         }}>
//                         <Layout>
//                             <Content style={{ background: '#fff' }}>
//                                 <List
//                                     itemLayout="horizontal"
//                                     style={{ marginRight: 25 }}
//                                     size="small"
//                                     bordered={false}
//                                     split={false}
//                                     dataSource={data}
//                                     renderItem={item => (
//                                         <List.Item>
//                                             <Row
//                                                 type="flex"
//                                                 justify="space-between"
//                                                 style={{
//                                                     width: "100%"
//                                                 }}>
//                                                 <Col span={8} xs={10}>
//                                                     {item.title}
//                                                 </Col>
//                                                 <Col
//                                                     style={{ textAlign: "end" }}
//                                                     span={16} xs={14}>
//                                                     {item.description}
//                                                 </Col>
//                                             </Row>
//                                         </List.Item>
//                                     )}
//                                 />
//                             </Content>
//                             <Sider width={'25%'} style={{ background: '#fff' }}>
//                                 <Progress
//                                     className='progress-center'
//                                     style={{
//                                         fontSize: '12px',
//                                     }}
//                                     size='small'
//                                     type="circle"
//                                     percent={completionRate}
//                                     width={85}
//                                     strokeWidth={8}
//                                     format={percent => `完成率${percent}%`}
//                                 />
//                             </Sider>
//                         </Layout>
//                     </Card>
//                 </Link>
//             )
//         });
//         let percent
//         if(this.state.should != 0){
//             percent = (this.state.real / this.state.should * 100).toFixed(2);
//         }else{
//             percent = '00.00'
//         }
//         console.log("percent", percent)
//         if (percent == 100) {
//             percent = Number(percent).toFixed(0);
//         }

//         return (
//             <div style={{ paddingBottom: '10px' }}>
//                 <Skeleton loading={this.state.confirmLoading} active>
//                     <div
//                         className='conditionCard'
//                         style={{
//                             boxShadow: '2px 2px 10px 4px rgba(14, 122, 191, 0.15)', 
//                             textAlign: 'center',
//                             padding: '12px 24px',
//                             background: '#ffffff',
//                         }}>
//                         <div>
//                             日期时段：
//                                 {(moment().week(moment().week()).startOf('week').add(1, "days").format('YYYY-MM-DD') + " ~ " + moment().format('YYYY-MM-DD'))}
//                         </div>
//                         <div>
//                             <Progress
//                                 type="circle"
//                                 percent={percent}
//                                 width={150}
//                                 strokeWidth={8}
//                                 style={{ marginTop: '10px', fontSize: '28px' }}
//                                 format={percent => `完成率${percent}%`}
//                             />
//                         </div>

//                         <div>
//                             <Row style={{ marginTop: '10px', }}>
//                                 <Col span={12}>
//                                     <Badge
//                                         status="processing"
//                                         text={"应巡计划：" + this.state.should + "个"} />
//                                 </Col>
//                                 <Col span={12}>
//                                     <Badge
//                                         status="success"
//                                         text={"实际完成：" + this.state.real + "个"} />
//                                 </Col>
//                                 <Col span={24}>
//                                     <Badge
//                                         status="warning"
//                                         text={"巡检项目数/已完成数/发现隐患数：" +
//                                             this.state.all + "/" + this.state.done + "/" + this.state.abnormal} />
//                                 </Col>
//                             </Row>
//                         </div>
//                     </div>
//                     <div style={{
//                         width: '100%',
//                         marginTop: '10px',
//                     }}>
//                         {cards}
//                     </div>
//                 </Skeleton>
//             </div>
//         )
//     }
// }
export default WeChatSecurityRank;